import React,{useState} from 'react'
import Head from 'next/head'
import {Row, Col  ,Breadcrumb,Affix } from 'antd'
import Header from '../components/Header'
import Author from '../components/Author'
import Advert from '../components/Advert'
import Footer from '../components/Footer'
import detailed from '../styles/detailed.module.css'
import home from '../styles/Home.module.css';
import {CalendarOutlined,FolderViewOutlined,FireOutlined} from "@ant-design/icons";
import ReactMarkdown from "react-markdown";
import MarkNav from "markdown-navbar";
import "markdown-navbar/dist/navbar.css";

import marked from "marked";//解析markdown
import hljs from "highlight.js";
import "highlight.js/styles/monokai-sublime.css";

const Detailed=(props)=>{

    let markdown='# P01:课程介绍和环境搭建\n' +
        '[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n' +
        '> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已... \n\n' +
        '**这是加粗的文字**\n\n' +
        '*这是倾斜的文字*`\n\n' +
        '***这是斜体加粗的文字***\n\n' +
        '~~这是加删除线的文字~~ \n\n'+
        '\`console.log(111)\` \n\n'+
        '# p02:来个Hello World 初始Vue3.0\n' +
        '> aaaaaaaaa\n' +
        '>> bbbbbbbbb\n' +
        '>>> cccccccccc\n'+
        '***\n\n\n' +
        '# p03:Vue3.0基础知识讲解\n' +
        '> aaaaaaaaa\n' +
        '>> bbbbbbbbb\n' +
        '>>> cccccccccc\n\n'+
        '# p04:Vue3.0基础知识讲解\n' +
        '> aaaaaaaaa\n' +
        '>> bbbbbbbbb\n' +
        '>>> cccccccccc\n\n'+
        '#5 p05:Vue3.0基础知识讲解\n' +
        '> aaaaaaaaa\n' +
        '>> bbbbbbbbb\n' +
        '>>> cccccccccc\n\n'+
        '# p06:Vue3.0基础知识讲解\n' +
        '> aaaaaaaaa\n' +
        '>> bbbbbbbbb\n' +
        '>>> cccccccccc\n\n'+
        '# p07:Vue3.0基础知识讲解\n' +
        '> aaaaaaaaa\n' +
        '>> bbbbbbbbb\n' +
        '>>> cccccccccc\n\n'+
        '``` var a=11; ```';

    const renderer=new marked.Renderer();
    marked.setOptions({
        renderer:renderer,
    })
    return (
        <>
            <Head>
                <title>博客详细页</title>
            </Head>
            <Header />
            <Row className={home.comm_main} type="flex" justify="center">
                <Col className={home.comm_left} xs={24} sm={24} md={16} lg={18} xl={14}  >
                    <div>
                        <div className={detailed.bread_div}>
                            <Breadcrumb>
                                <Breadcrumb.Item><a href="/">首页</a></Breadcrumb.Item>
                                <Breadcrumb.Item>视频列表</Breadcrumb.Item>
                                <Breadcrumb.Item>xxxx</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>

                        <div>
                            <div className={detailed.detailed_title}>
                                React实战视频教程-技术胖Blog开发(更新08集)
                            </div>

                            <div className="list-icon center">
                                <span><CalendarOutlined /> 2019-06-28</span>
                                <span><FolderViewOutlined /> 视频教程</span>
                                <span><FireOutlined /> 5498人</span>
                            </div>

                            <div className={detailed.detailed_content} >
                                <ReactMarkdown>{markdown}</ReactMarkdown>
                            </div>

                        </div>

                    </div>
                </Col>

                <Col className={home.comm_right} xs={0} sm={0} md={7} lg={5} xl={4}>
                    <Author />
                    <Advert />
                    <Affix offsetTop={5}>
                        <div className={`comm-box ${detailed.detail_nav}`}>
                            <div className={detailed.nav_title}>
                                文章目录
                            </div>
                            <MarkNav
                                className={`article-menu`}
                                source={markdown}
                                ordered={false}
                            />
                        </div>
                    </Affix>
                </Col>
            </Row>
            <Footer/>

        </>
    )
}
export default Detailed
